<template>
  <div>
    <div class="dis_top">
      <p style="display: block">初检录入</p>
      <div style="height: 30px; margin-top: 10px;padding: 15px ; background-color:#E5F6FE">
        <el-row >
          <el-col :span="6">
            体检编号：{{ peOrdersMain.orderNo }}
          </el-col>
          <el-col :span="6">
            姓名：{{ peOrdersMain.customerName }}
          </el-col>
          <el-col :span="6">
            性别：{{ peOrdersMain.sex |formatSex }}
          </el-col>
          <el-col :span="6">
            年龄：{{ peOrdersMain.age }}
          </el-col>

          <!--                <el-form-item label="合同名称：" prop="chineseName">-->
          <!--                  {{ peOrdersMain.sex }}-->
          <!--                </el-form-item>-->
        </el-row>
      </div>

    </div>
    <div class="dis_flex">
      <div class="flex_l">
        <div class="l_right">
          检查项目结果状态列表
          <div v-for="(item,index) in ItemList" :key="index" class="list_ch">
            <div>
              <div style="margin-bottom: 15px">
                <el-checkbox
                    label=""
                    v-model="item.status"
                    :checked="item.checkStatus===1"
                    :disabled="true"
                ></el-checkbox>
                <el-link
                    @click="onItemChange(item.itemId)"
                    :type="examItemCurId===item.itemId ? 'success':''"
                    style="margin-left: 5px"
                >
                  {{ item.itemName }}
                  <span style="color: red" v-if="item.errorItemContentCount>0">
                    ({{ item.errorItemContentCount }})
                  </span>
                </el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_r">
        <!-- 右侧标签页 -->
        <div>
          <div class="r_box">
            <el-table
                  :data="examItemContentDetails"
                  style="width: 100%"
                  :span-method="objectSpanMethod"
                  :row-class-name="tableRowClassName"
                  height="450"
              >
                <el-table-column prop="deptName" label="项目名称" width="150" fixed>
                  <template slot-scope="scope">
                    <div :class="scope.row.normalResult?'':'red'">{{ scope.row.itemName }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="contentName" label="检查内容" width="150" fixed>
                  <template slot-scope="scope">
                    <div :class="scope.row.normalResult?'':'red'">{{ scope.row.contentName }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="resultValue" label="异常结果" fixed>
                  <template slot-scope="scope">
                    <div :class="scope.row.normalResult?'':'red'">{{ scope.row.resultValue }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="医生" prop="doctorName" fixed>
                  <template slot-scope="scope">
                    <div :class="scope.row.normalResult?'':'red'">{{ scope.row.doctorName }}</div>
                  </template>
                </el-table-column>
              </el-table>

            <!--诊断结论 -->
            <div style="margin-top: 15px;background: #eee">
              <el-row>
                <el-col :span="2">
                  <el-button v-if="action==='edit'" @click="addConclusion()" style="margin: 5px 10px;">添加结论</el-button>
                </el-col>
                <el-col :span="2">
                  <el-button v-if="action==='edit'" @click="addRow" style="margin: 5px 10px;">+</el-button>
                </el-col>
                <el-col :span="20">
                  <h2 style="text-align: center;line-height: 40px">诊断结论</h2>
                </el-col>
              </el-row>

              <el-form ref="form" label-width="0px" label-position="left">
                <el-table
                    header-row-class-name="header_row_style"
                    :data="verifyResultInfoList"
                >
                  <el-table-column prop="date" label="序号" width="80" type="index"></el-table-column>
                  <el-table-column label="结论及建议">
                    <template slot-scope="scope">
                      <el-form-item :prop="'verifyResultInfoList['+scope.$index+']'">
                        <el-input
                            type="textarea"
                            v-model.trim="scope.row.resultInfo"
                            size="mini"
                            placeholder="请填写值"
                            :autosize="{ minRows: 3}"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column label="排序" width="180">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="upindex(scope.$index,scope.row)">↑</el-button>
                      <el-button size="mini" @click="downindex(scope.$index,scope.row)">↓</el-button>
                      <el-button size="mini" @click="removeResRecord(scope.row)">-</el-button>
                    </template>
                  </el-table-column>

                </el-table>
                <div style="margin-top: 15px">
                  <el-button type="danger" v-if="action==='edit'" @click="rollback">返 检</el-button>
                </div>
                <!-- 底部签字 -->
                <div class="r_box_con_bottom">
                  <div>
                    <el-form-item label="检查医师" label-width="100px">
                      <el-select v-model="peOrdersDetail.doctorName">
                        <el-option :label="peOrdersDetail.doctorName" :value="peOrdersDetail.doctorName"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="初检时间" label-width="100px">
                      <el-date-picker
                          v-model="verifyTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div>
                    <el-button v-if="action==='edit'" type="primary" @click="saveRecord">提交</el-button>
                    <el-button class="buttons" @click="huitui()">返回</el-button>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="选择诊断建议" :visible.sync="moreVisible">
      <el-form ref="form" :model="searchForm" label-width="0px" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item style="white-space: nowrap;">
              <el-input class="input_c" v-model="searchForm.keyword" placeholder="请输入关键词"> clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search" @click="getCommonResults"></el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
          ref="multipleTable"
          header-row-class-name="header_row_style"
          :data="CommonResults"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="常用结果词条" prop="entryContent">
        </el-table-column>
        <el-table-column label="异常解读" prop="errorInfo">
        </el-table-column>
        <el-table-column label="健康指导" prop="healthGuid">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRecord">确定</el-button>
        <el-button type="primary" @click="moreVisible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {formatTimeToStr} from "@src/common/utils/date";

export default {
  data() {
    return {
      verifyTime: formatTimeToStr(new Date(), "yyyy-MM-dd hh:mm:ss"),
      resultArr: [],
      moreVisible: false,
      CommonResults: [],
      trendOptions: [
        {label: "↑", value: 1},
        {label: "↓", value: 2},
        {label: "+", value: 3},
      ],
      deptName: "",
      ordersId: '',
      action: '',
      userName: '',
      userId: '',
      peOrdersDetail: {},
      peOrdersMain: {},
      examItemContentDetails: [],
      verifyResultInfoList: [],
      searchForm: {
        keyword: '',
        deptIds: [],
      },
      examItemCurId: '',
      examItemSel: {},
      ItemDict: {},
      ItemList: [],
      errItemIds: [],
      form: {
        diagnosisResult: ""
      },
    }
  },
  filters: {
    formatSex: function (val) {
      var dict = {1: "男", 2: "女"}
      return dict[val]
    },
  },
  methods: {
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if(rowIndex === 0){
          return {
            rowspan: this.examItemContentDetails.length-1 ,
            colspan: 1
          };
        }else {
          if(rowIndex==this.examItemContentDetails.length-1){
            if(columnIndex == 1){
              return {
                rowspan: 3,
                colspan: 1
              };
            }
            return {
              rowspan: 1,
              colspan: 1
            };
          }else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === this.examItemContentDetails.length - 1) {
        return 'success-row';
      }
      return '';
    },

    getPeExamRecordDetail() {
      let req = {
        ordersId: this.ordersId,
      }
      this.$axios.getVerifyPeOrdersMainDetails(req).then(res => {
        if (res.code === "00000") {
          const peOrdersDetail = res.data.peOrdersDetailsList;
          this.peOrdersMain = res.data.peOrdersMain
          this.verifyResultInfoList = this.peOrdersMain.verifyResultInfoList
          peOrdersDetail.forEach((item, index) => {
            this.ItemDict[item.itemId] = item
            this.ItemList.push({
              itemId: item.itemId,
              itemName: item.itemName,
              checkStatus: item.checkStatus,
              errorItemContentCount: item.errorItemContentCount
            })
          })
          if (this.ItemList.length > 0) {
            this.examItemCurId = this.ItemList[0].itemId
            this.peOrdersDetail = this.ItemDict[this.ItemList[0].itemId]
            if (this.peOrdersDetail.examRecord !== null) {
              this.examItemContentDetails = this.peOrdersDetail.examItemContentDetails
              this.examItemContentDetails.forEach(v => {
                v["itemName"] = this.peOrdersDetail.itemName
                v["doctorName"] = this.peOrdersDetail.examRecord.doctorName
                v["resultValue"] = v.examContentsResult && v.examContentsResult.resultValue
              })
              this.examItemContentDetails.push({
                itemName: "科室小结",
                contentName: this.peOrdersDetail.diagnosisResult || '暂无',
                normalResult: true,
              })
            }
          }
          this.peOrdersDetail.doctorCode = this.userId
          this.peOrdersDetail.doctorName = this.userName
        }
      })
    },

    onItemChange(id) {
      this.examItemCurId = id
      this.peOrdersDetail = this.ItemDict[this.examItemCurId]
      this.peOrdersDetail.doctorCode = this.userId
      this.peOrdersDetail.doctorName = this.userName
      if (this.peOrdersDetail.examRecord !== null) {
        this.examItemContentDetails = [...this.peOrdersDetail.examItemContentDetails]
        this.examItemContentDetails.forEach(v => {
          v["itemName"] = this.peOrdersDetail.itemName
          v["doctorName"] = this.peOrdersDetail.examRecord.doctorName
          v["resultValue"] = v.examContentsResult && v.examContentsResult.resultValue

        })
        this.examItemContentDetails.push({
          itemName: "科室小结",
          contentName: this.peOrdersDetail.diagnosisResult,
          normalResult: true,
        })
      }
    },

    huitui() {
      this.$router.back()
    },

    addConclusion() {
      this.moreVisible = true;
      this.getCommonResults()
    },

    getCommonResults() {
      this.searchForm.deptIds = [this.peOrdersDetail.deptId]
      this.$axios.queryResultPage(this.searchForm).then(res => {
        if (res.code === "00000") {
          this.CommonResults = res.data.records
        }
      })
    },

    handleSelectionChange(val) {
      this.multipleTablelist = val;
    },

    addRecord() {
      this.multipleTablelist.forEach(item => {

        var obj = {
          itemId: item.examItemId,
          deptId: item.deptId,
        }

        if(item.errorInfo !== null && item.errorInfo !== 'null'){
          obj['resultInfo'] =`${item.entryContent}【${item.errorInfo}】，${item.healthGuid}`
        }else {
          obj['resultInfo'] =`${item.entryContent}，${item.healthGuid}`
        }
        if (this.verifyResultInfoList === null) {
          obj['index'] = 1
          this.verifyResultInfoList = [obj]
        } else {
          obj['index'] = this.verifyResultInfoList.length
          this.verifyResultInfoList.push(obj)
        }
      })
      this.moreVisible = false
    },

    rollback() {
      var req = {
        ordersId: this.ordersId,
        returnCheck: true
      }
      console.log(req)
      this.$axios.saveVerifyPeOrdersMainDetails(req).then(res => {
        if (res.code === "00000") {
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
      })
    },

    saveRecord() {
      var req = {
        ordersId: this.ordersId,
        verifyResultInfoList: this.verifyResultInfoList,
        verifyTime: this.verifyTime,
        verifyDoctorName: this.userName
      }
      this.$axios.saveVerifyPeOrdersMainDetails(req).then(res => {
        if (res.code === "00000") {
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
      })
    },

    upindex(index, row) {
      if (index > 0) {
        let upDate = this.verifyResultInfoList[index - 1];
        this.verifyResultInfoList.splice(index - 1, 1);
        this.verifyResultInfoList.splice(index, 0, upDate);
      } else {
        this.$message.warning("已经是第一条了！");
        return false;
      }
    },

    downindex(index, row) {
      if (index + 1 === this.verifyResultInfoList.length) {
        this.$message.warning("已经是最后一条了！");
        return false;
      } else {
        let downDate = this.verifyResultInfoList[index + 1];
        this.verifyResultInfoList.splice(index + 1, 1);
        this.verifyResultInfoList.splice(index, 0, downDate);
      }
    },

    addRow() {
      this.verifyResultInfoList.push({index: this.verifyResultInfoList.length, resultInfo: ''})
    },

    removeResRecord(row) {
      var arr = this.verifyResultInfoList
      arr.splice(row.index, 1)
      this.verifyResultInfoList = arr
    },
  },
  created() {
    const user = JSON.parse(localStorage.getItem("ms_userInfo"))
    this.userId = user.userId
    this.userName = user.userName

    this.ordersId = localStorage.getItem('through_ordersId')
    this.action = localStorage.getItem('through_action')
    this.getPeExamRecordDetail()
  }
}
</script>

<style scoped>


::v-deep .el-textarea__inner{
  overflow-y: hidden;
}
.red {
  color: red;
}

.dis_top {
  position: absolute;
  z-index: 99;
  top: 0px;
  left: 0px;
  padding: 5px;
  color: #000000;
  font-weight: bold;
  width: calc(100% - 10px);
  background: #ffffff;
}

.dis_top > div > span {
  margin-left: 20px;
}

.dis_flex {
  display: flex;
  margin-top: 100px;
}

.flex_l {
  width: 300px !important;
  flex-shrink: 0;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.r_box {
  margin-left: 20px;
  margin-bottom: 20px;
  width: 1300px;
  line-height: 25px;
  border: 1px solid #efefef;
}

.r_box_con {
  padding-left: 20px;
  padding-right: 20px;
}

flies_box {
  margin-left: 20px;
  margin-bottom: 20px;
  width: 1300px;
  line-height: 25px;
}

.flies {
  margin-top: 15px;
}

.flies p {
  margin-bottom: 10px;
}

.r_box_con_title {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-bottom: 1px solid #333;
  font-size: 18px;
  line-height: 30px;
}

.r_box_con_bor {
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

.r_box_con_box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 45px;
}

.r_box_con_sl1 {
  padding: 0px 5px;
  width: 20%;
}

.r_box_con_sl2 {
  padding: 0px 5px;
  width: 30%;
}

.r_box_con_sl3 {
  padding: 0px 5px;
  width: 10%;
}

.r_box_con_sl4 {
  padding: 0px 5px;
  width: 15%;
}

.r_box_con_sl5 {
  padding: 0px 5px;
  width: 15%;
}

.r_box_con_sl6 {
  padding: 0px 5px;
  width: 10%;
}

.r_box_con_res {
  margin-top: 20px;
}

.el-form--inline .el-form-item {
  margin: 20px;
}

.textarea {
  width: 600px
}

.r_box_con_res /deep/ .el-form-item__label {
  font-size: 22px !important;
}

.r_box_con_bottom {
  margin-top: 20px;
  display: flex;
}

.r_box_con_bottom div {
  margin-right: 15px;
}

.l_left {
  color: #7F7F7F;
  font-weight: bold;
  height: 36px;
}

.list_ch {

}

.flex_r {
  background: #ffffff;
  /* overflow-y: scroll; */
}

.r_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
  color: #666666;
}

.r_list:hover {
  color: #2F9688;
  font-weight: bold;
}

.l_right {
  background: #F2F2F2;
  height: 100%;
  padding: 10px;
}


.diagnose > div:first-child {
  display: flex;
}

.bj_doctor {
  background: #E5F6FE;
}
</style>
